<div class="app-modal valign-wrapper">
    <div class="container height100">
        <div class="row height100">
            <div class="col-md-6 col-md-offset-4 height100 valign-wrapper">
                <div class="modal-content" ng-show="!passmode && !checkSecondPass">
                    <div class="modal-header modal-iconed">
                        <div class="close-modal" ng-click="close()">
                            <span class="sr-only"><translate>Close modal</translate></span>
                        </div>
                    </div>
                    <div class="modal-header clearfix">
                        <div>
                            <h2>{{'Send LSK'|translate}}</h2>
                        </div>
                        <div><translate>Please enter the Recipient Address and LSK Amount that you would like send below.</translate></div>
                    </div>
                    <div class="modal-body">
                        <form ng-submit="passcheck()">
                            <div class="input-group app-addon">
                                <input id="to" ng-focus="focus == 'to'" type="text" class="form-control" placeholder="{{'Recipient Address'|translate}}" ng-model="to">
                                <span class="input-group-addon clear" ng-click="clearRecipient()"></span>
                            </div>
                            <p class="error-container" ng-show="errorMessage.recipient">
                                <span class="pass-error">{{errorMessage.recipient}}</span>
                            </p>
                            <div class="field-padding">
                                <div class="input-field">
                                    <input id="amount" type="text" ng-model="amount" ng-focus="focus == 'amount'" ng-class="{'invalid': errorMessage.amount}">
                                    <label for="amount"><translate>LSK Amount</translate></label>
                                </div>
                                <span class="fee-text flat-text pull-right"><translate>Fee: {{fee | liskFilter}} LSK</span>
                                <span class="pass-error" ng-show="errorMessage.amount">{{errorMessage.amount}}</span>
                            </div>
                            <p class="error-container" ng-show="errorMessage.fromServer">
                                <span class="pass-error">{{errorMessage.fromServer}}</span>
                            </p>
                            <input type="submit" ng-show="false">
                        </form>
                    </div>
                    <div class="modal-body bordered">
                        <span class="send-info-text flat-text"><translate>Make sure you're sending LSK to the right address. This action can't be undone later.</translate></span>
                    </div>
                    <div class="modal-body bordered">
                        <ul class="nav modal-buttons pull-right">
                            <li>
                                <input type="submit" value="{{'Cancel' | translate}}" ng-click="close()" class="btn-flat" />
                            </li>
                            <li>
                                <input type="submit" value="{{'send lisk' | translate}}" ng-click="passcheck()" class="btn-flat blue-link" ng-class="{'disabled': sending}" ng-disabled="sending" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="modal-content" ng-show="passmode && !checkSecondPass">
                    <div class="modal-header modal-iconed">
                        <div class="close-modal" ng-click="close()">
                            <span class="sr-only"><translate>Close modal</translate></span>
                        </div>
                    </div>
                    <div class="modal-header clearfix">
                        <div>
                            <h2>{{'Account Verification'|translate}}</h2>
                        </div>
                        <div><translate>Please enter your passphrase below.</translate></div>
                    </div>
                    <div class="modal-body">
                        <form ng-submit="sendTransaction(secretPhrase)">
                            <div class="field-padding">
                                <div class="input-field">
                                    <input id="passPhrase" type="password" ng-model="secretPhrase" ng-focus="focus == 'secretPhrase'" ng-trim="false" autofocus ng-class="{'invalid': errorMessage.fromServer}">
                                    <label for="passPhrase"><translate>Your Passphrase</translate></label>
                                </div>
                                <span class="pass-error" ng-show="errorMessage.fromServer && !secondSecret">{{errorMessage.fromServer}}</span>
                            </div>
                            <input type="submit" ng-show="false">
                        </form>
                    </div>
                    <div class="modal-body bordered">
                        <ul class="nav modal-buttons pull-right">
                            <li>
                                <input type="submit" value="{{'GO BACK' | translate}}" ng-click="passcheck()" class="btn-flat" />
                            </li>
                            <li>
                                <input type="submit" value="{{'send lisk' | translate}}" ng-click="sendTransaction(secretPhrase)" class="btn-flat waves-blue" ng-class="{'disabled': sending}" ng-disabled="sending" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="modal-content" ng-show="checkSecondPass">
                    <div class="modal-header modal-iconed">
                        <div class="close-modal" ng-click="close()">
                            <span class="sr-only"><translate>Close modal</translate></span>
                        </div>
                    </div>
                    <div class="modal-header clearfix">
                        <div>
                            <h2>{{'Account Verification'|translate}}</h2>
                        </div>
                        <div><translate>Please enter your second passphrase below.</translate></div>
                    </div>
                    <div class="modal-body">
                        <form ng-submit="sendTransaction(secretPhrase, true)">
                            <div class="field-padding">
                                <div class="input-field">
                                    <input id="secondPhrase" type="password" ng-model="secondPhrase" ng-trim="false" autofocus ng-focus="focus == 'secondPhrase'" ng-class="{'invalid': errorMessage}">
                                    <label for="secondPhrase"><translate>Your Second Passphrase</translate></label>
                                </div>
                                <span class="pass-error" ng-show="errorMessage.fromServer">{{errorMessage.fromServer}}</span>
                            </div>
                            <input type="submit" ng-show="false">
                        </form>
                    </div>
                    <div class="modal-body bordered">
                        <ul class="nav modal-buttons pull-right">
                            <li>
                                <input type="submit" value="{{'GO BACK' | translate}}" ng-click="passcheck(true)" class="btn-flat" />
                            </li>
                            <li>
                                <input type="submit" value="{{'send lisk' | translate}}" ng-click="sendTransaction(secretPhrase, true)" class="btn-flat blue-link" ng-class="{'disabled': sending}" ng-disabled="sending" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
